<template>
  <div class="app-container">
    <!-- <div class="filter-container">
      <el-input v-model="listQuery.identifier" placeholder="商品编号" class="filter-item" />
      <el-input v-model="listQuery.name$lk" placeholder="商品名称" class="filter-item" />
      <Cascader v-model="listQueryCategoryId" ref="listQueryCategoryId" placeholder="商品分类" :options="categoryData"
        :props="props" class="filter-item" style="width: 210px;" />
      <el-select v-model="listQuery.status" placeholder="状态" clearable class="filter-item">
        <el-option v-for="item in statusJson" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"
       >
        查询
      </el-button>
      <el-button class="filter-item" type="danger" icon="el-icon-delete" @click="handlePlDelete"
        >
        批量删除
      </el-button>
    </div> -->
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row row-key="id" style="width: 100%;"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40" />
      <el-table-column label="序号" type="index" align="center" width="60px" />
      <!-- <el-table-column label="序号" prop="sequence" align="center" width="60px" /> -->
      <el-table-column label="商品id" prop="productId" align="center" width="100px" />
      <el-table-column label="商品名称" prop="productName" align="center" />
      <!-- <el-table-column label="商品分类" align="center" /> -->
			<el-table-column label="商品图片" align="center">
				<template slot-scope="{row}">
				 <el-image :key="row.productImg" style="width: 100px; height: 100px" :src="row.productImg" :preview-src-list="[row.productImg]">
				 </el-image>
				</template>
				
			</el-table-column>
      <el-table-column label="商品价格" prop="productPrice" align="center" />
			<el-table-column label="商品销量" prop="salesVolume" align="center" />
      <el-table-column label="状态" align="center">
        <template slot-scope="{row}">
          <!-- <span>{{ returnValueToLable(row.status,statusJson) }}</span> -->
					<span>{{row.productStatus}}</span>
        </template>
      </el-table-column>
     <el-table-column label="时间" prop="createTime" align="center" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
			  <template slot-scope="{row}">
			    <el-button type="primary" plain size="mini" @click="toDetail(row.memberId,row.productId)">
			      查看
			    </el-button>
			  </template>
			</el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pagenum" :limit.sync="listQuery.pagesize"
      @pagination="getList" />

  </div>
</template>

<script>
// import { categoryPageVoByQo } from '@/api/product'
import { productBrowsingHistory } from '@/api/user'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import Cascader from '@/components/Cascader'

export default {
  name: 'collectRecord',
  directives: { waves },
  components: { Cascader, Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pagenum: 1,
        pagesize: 20,
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true;
			let { pagenum, pagesize } = this.listQuery;
      productBrowsingHistory({pagenum, pagesize}).then(response => {
				console.log(response);
        this.list = response.records || []
        this.total = response.total
        this.listLoading = false
      })
    },
		// 批量操作
		handleSelectionChange(val) {
		  this.multipleSelection = val.map((ele) => {
		    return ele.id
		  })
		},
		toDetail(gongyingId, productId) {
			this.$router.push({
				path: "/front-shop/productDetail",
				query: {
					id: gongyingId,
					productId: productId
				}
			});
		}
  }
}
</script>
